import React from "react";
import { SearchOutlined } from "@ant-design/icons";
import { Button, Input, Select, Space } from "antd";
import "./SearchList.sass";

export default function SearchList(props) {
  const { searchCriteriaInf } = props;

  return (
    <form className="searchList">
      <div className="boxesTitle">
        <Space>
          <SearchOutlined />
          筛选查询
        </Space>
        <Space>
          <Button>重置</Button>
          <Button>查询</Button>
        </Space>
      </div>
      <div className="searchCriteria">
        <Space>
          {searchCriteriaInf.map((item, index) => {
            const { criteriaNames, inputOrSelect } = item;
            return (
              <Space key={index}>
                {criteriaNames}
                {inputOrSelect ? (
                  <Input placeholder={`请输入目标${criteriaNames}`} />
                ) : (
                  <Select placeholder={`请选择目标${criteriaNames}`} />
                )}
              </Space>
            );
          })}
        </Space>
      </div>
    </form>
  );
}
